<template>
  <div>
    <el-menu
      :default-active="currentIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/">
      <i class="el-icon-menu"></i>
      商品管理</el-menu-item>
      <el-menu-item index="/params">
      <i class="el-icon-document"></i>
      规格参数</el-menu-item>
      <el-menu-item index="/content">
      <i class="el-icon-setting"></i>
      内容分类管理</el-menu-item>
      <el-menu-item class="login">
        <router-link to="/ucenter" tag="span" class="user-name">{{username}}</router-link>
        <el-button @click="logout">退出登录</el-button>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {
      currentIndex: "/",
    };
  },
  computed: {
    ...mapState('loginModule', ['username'])
  },
  mounted(){
    if(sessionStorage.getItem('key')) {
      this.currentIndex = sessionStorage.getItem('key');
    }
  },
  methods: {
    ...mapMutations('loginModule', ['clearToken','clearUsername']),
    logout() {
      this.clearToken();
      this.clearUsername();
      localStorage.removeItem('ego');
      this.$router.replace('/login');
    },
    handleSelect(key) {
      sessionStorage.setItem("key", key)
    },
  },
};
</script>

<style scoped>
.login {
    float: right !important;
}

.user-name {
    color: #fff;
    margin-right: 10px;
    font-size: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>